<?php ob_start() ?>
<div class="container" style="background-color: #22262e; padding:60px;">
    <div class="row">
        <h1 class="text-center cabezera"><i class="fa fa-briefcase" style="color: #57a957;"></i> <b style="color: #57a957;"><?php echo LABEL_REGISTROTITULO ?><span style="color:#57a957;"><b>bet</b></span>porra<br/>
        </h1>
        <p style="font-size:1.3em; color:#ccc;"><?php echo LABEL_REGISTROSUBTITULO ?></p>
    </div>
</div>
<div class="jumbotron min-screen">
    <!-- container -->
    <div id="container">
        <div class="row" style="margin-left: 0px;margin-right: 0px;">		
            <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-xs-12">
                <br>
                <form method="POST" action="registro" name="form_registro" id="form_registro" accept-charset="UTF-8" role="form" class="form-signin" autocomplete="off">
                    <fieldset>
                        <div class="form-group">
                            <input class="form-control" placeholder="<?php echo LABEL_REGISTROUSUARIO ?>" name="usuario" type="text" required="required">
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="E-mail" name="email" type="email" required="required">
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="<?php echo LABEL_REGISTRONOMBRE ?>" name="nombre" type="text" value="" required="required">
                        </div>
                        <div class="form-group">
                            <div class="input-group date">
                                <input class="form-control" placeholder="<?php echo LABEL_REGISTROFECHANAC ?>" name="fecha_nac" id="fecha_nacimiento" type="text" required="required">
                                <span class="input-group-addon">
                                    <span class="fa fa-calendar"></span>
                                </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="<?php echo LABEL_REGISTROCLAVE ?>" name="password" type="password" value="" required="required" style="margin-bottom: 0px;">
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="<?php echo LABEL_REGISTROCONFCLAVE ?>" name="password_confirmation" type="password" value="" required="required">
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input id="checkbox" name="terminos" class="checkbox checkbox-inline" type="checkbox" value="1" checked="checked"><?php echo LABEL_REGISTROTERMINOS1 ?><a href=""><?php echo LABEL_REGISTROTERMINOS2 ?>
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-lg btn-primary btn-block"><?php echo LABEL_REGISTROCREAR ?></button>
                            <!--<p class="text-center" style="margin-top:10px;">O</p>
                            <a class="btn btn-lg btn-primary btn-block" href=""><i class="fa fa-facebook"></i> <?php echo LABEL_REGISTROFACEBOOK ?></a>
                            -->
                        </div>

                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End container -->
<script type = "text/javascript" >
    $(document).ready(function() {

        $('#fecha_nacimiento').datepicker({
            format: "dd-mm-yyyy",
            startView: 2,
            autoclose: true,
            language: "es",
            todayHighlight: true
        });

        $('#form_registro').bootstrapValidator({
            message: 'Datos no validos',
            feedbackIcons: {
                valid: 'fa fa-check',
                invalid: 'fa fa-times',
                validating: 'fa fa-refresh fa-spin'
            },
            live: 'enabled',
            submitButtons: 'button[type="submit"]',
            submitHandler: null,
            trigger: null,
            fields: {
                usuario: {
                    validators: {
                        notEmpty: {
                            message: 'El nombre de usuario no puede estar vacio.'
                        },
                        stringLength: {
                            min: 3,
                            max: 45,
                            message: 'El nombre de usuario debe tener entre 3 y 15 caracteres.'
                        },
                        remote: {
                            url: 'comprobacion_nombre_usuario_existente',
                            message: 'El nombre de usuario no esta disponible'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_\.]+$/,
                            message: 'El nombre de usuario solo puede contener caracteres alfanuméricos y barra baja.'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'La Email no puede estar vacio.'
                        },
                        remote: {
                            url: 'comprobacion_email_existente',
                            message: 'El email no esta disponible'
                        },
                        emailAddress: {
                            message: 'El Email no es valido.'
                        }
                    }
                },
                nombre: {
                    validators: {
                        notEmpty: {
                            message: 'El nombre no puede estar vacio.'
                        },
                        stringLength: {
                            min: 3,
                            max: 45,
                            message: 'El nombre debe tener entre 3 y 15 caracteres.'
                        },
                        regexp: {
                            regexp: /^[a-zA-ZñÑáéíóúÁÉÍÓÚ0-9_/,.\s]+$/,
                            message: 'El nombre solo puede contener caracteres alfanuméricos y barra baja.'
                        }
                    }
                },
                fecha_nac: {
                    validators: {
                        notEmpty: {
                            message: 'La fecha no puede estar vacio.'
                        },
                        date: {
                            format: 'DD-MM-YYYY',
                            message: 'Formato de fecha de nacimiento invalida (DD-MM-YYYY)'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: 'La contraseña no puede estar vacio.'
                        },
                        identical: {
                            field: 'password_confirmation',
                            message: 'La contraseña y confirmar contraseña deben ser iguales'

                        },
                        stringLength: {
                            min: 4,
                            max: 45,
                            message: 'La contraseña debe tener entre 4 y 45 caracteres.'
                        }
                    }
                },
                password_confirmation: {
                    validators: {
                        notEmpty: {
                            message: 'La contraseña no puede estar vacio.'
                        },
                        identical: {
                            field: 'password',
                            message: 'La contraseña y confirmar contraseña deben ser iguales'

                        },
                        stringLength: {
                            min: 4,
                            max: 45,
                            message: 'La contraseña debe tener entre 4 y 45 caracteres.'
                        }
                    }
                },
                terminos: {
                    validators: {
                        notEmpty: {
                            message: 'Debe Aceptar los terminos.'
                        }
                    }
                }

            }
        });
    });
</script>
<?php
$contenido = ob_get_clean();
include 'app/templates/plantilla_publica.php';
?>